<!--电子合同-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #title>
<!--      <cu-icon class="icon-primary" type="org-hetong" />-->
      近7天停车收费趋势
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        @click="JumpToPage">更多&nbsp;&gt;</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div id="Parkingfee">

      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick, toRefs,onUnmounted
} from "vue";
import {Empty, message, Modal, Progress} from "ant-design-vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
import { Chart } from '@antv/g2';
export default defineComponent({
  name: "ParkingTrend",
  components: {
  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
    })

    const JumpToPage = () => {
      utils.goAppRoute('workPark', 'tempOrder');
    }

    const Parkingfee = {}

    const goMore = () => {
        if(!Parkingfee.chart){
          Parkingfee.chart = new Chart({
            container: 'Parkingfee',
            autoFit: true,
            height: 280,
            appendPadding: [20, 10, 0, 15],
          });
        }

      request .get("/work_park", "/workbench/cash_last_7_days")
          .then((res) => {
            let dataes = res.list

            Parkingfee.chart.data(dataes);
            Parkingfee.chart.scale({
              date: {
                range: [0, 1],
              },
              total: {
                nice: true,
              },
            });

            Parkingfee.chart.annotation().text({
              // position: ["-2%", "-20%"],
              content: "元",
              style: {
                fill: "#8c8c8c",
                fontWeight: 300,
              },
              offsetY: -225,
              offsetX: -15,
            });

            Parkingfee.chart.tooltip({
              showCrosshairs: true,
              shared: true,
            });

            Parkingfee.chart.axis('total', {
              label: {
                formatter: (val) => {
                  return val;
                },
              },
            });

            Parkingfee.chart.legend("name", {
              position: "top",
            });

            Parkingfee.chart
                .line()
                .position('date*total')
                .color('name')
                .shape('smooth');

            Parkingfee.chart
                .point()
                .position('date*total')
                .color('name')
                .shape('circle');

            Parkingfee.chart.render();

          })
    };

    onMounted(() => {
      goMore()
    });

    onUnmounted(()=>{
      if (Parkingfee.chart) {
        Parkingfee.chart.destroy();
      }
    })

    return {
      ...toRefs(state),
      goMore,
      Parkingfee,
      JumpToPage,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;

}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>